<script setup lang="tsx">
import { message } from "@/utils/message";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
const formRef = ref();
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  ref,
  onMounted,
  onUnmounted,
  watch,
  toRaw,
  h,
  onBeforeUnmount
} from "vue";

import { useRole } from "./utils/hook";
import {} from "@/api/edgeAcquisition";
const defaultProps = {
  children: "children",
  label: "label"
};

const {
  loading,
  crcModeData,
  write16CmdData,
  int16OrderData,
  int32OrderData,
  floatOrderData,
  int64OrderData,
  doubleOrderData,
  asciiOrderData,
  workModeData,
  columns,
  editMap,
  onEdit,
  openDebug,
  closeDebug,
  cellDialogUpdate,
  isOpen,
  current_device_data,
  tree_data,
  copyDevice,
  getInterfaceSelectOptions,
  handleNodeClick,
  selected_by_default_id,
  applyVariableChange,
  updateDevice,
  deleteDevice,
  addVariable,
  searchAcquisitionData,
  clickAddDevice,
  deleteVariable,
  interfaceSeleteOption,
  onSave,
  onCancel
} = useRole();

onMounted(() => {
  searchAcquisitionData();
  setTimeout(() => {
    getInterfaceSelectOptions();
  }, 300);
});

onBeforeUnmount(() => {
  closeDebug();
});
onUnmounted(() => {});
defineOptions({
  name: "ServerParameter"
});
</script>

<template>
  <div v-loading="loading" element-loading-text="加载中..." class="content">
    <div class="content_left">
      <el-button
        type="primary"
        size="small"
        style="margin-bottom: 10px"
        @click="clickAddDevice()"
        >添加设备</el-button
      >
      <el-tree
        style="max-width: 600px"
        :data="tree_data"
        :indent="5"
        node-key="id"
        :props="defaultProps"
        highlight-current
        default-expand-all
        :current-node-key="selected_by_default_id"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <span
              :title="node.label"
              style="
                display: block;
                width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              >{{ node.label }}</span
            >
            <div v-if="node.level === 2" style="width: 90px">
              <!-- 仅在二级节点上显示按钮 -->

              <el-button
                type="primary"
                size="small"
                title="修改"
                link
                @click="updateDevice(data)"
              >
                U
              </el-button>
              <el-button
                style="margin-left: 0px"
                type="primary"
                size="small"
                title="复制"
                link
                @click="copyDevice(data)"
              >
                C
              </el-button>
              <el-button
                style="margin-left: 0px"
                type="danger"
                size="small"
                title="删除"
                link
                @click="deleteDevice(node, data)"
              >
                D
              </el-button>
            </div>
          </div>
        </template>
      </el-tree>
    </div>

    <div class="content_middle">
      <div v-if="tree_data.length > 0" class="content_middle_title">
        {{ current_device_data.protocol }}
      </div>
      <el-form
        v-if="tree_data.length > 0"
        :model="current_device_data"
        class="device_form"
      >
        <el-form-item label="所属接口">
          <el-select
            v-model="current_device_data.interfaceName"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in interfaceSeleteOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- 网口的时候才会有显示 -->
        <!-- <el-form-item label="ServerIP">
          <el-input v-model="current_device_data.ServerIP" class="!w-[220px]" />
        </el-form-item>
        <el-form-item label="ServerPort">
          <el-input
            v-model="current_device_data.ServerPort"
            class="!w-[220px]"
          />
        </el-form-item> -->
        <el-form-item v-if="current_device_data.remoteIp" label="ServerlP">
          <el-input v-model="current_device_data.remoteIp" class="!w-[220px]" />
        </el-form-item>
        <el-form-item v-if="current_device_data.remotePort" label="ServerPort">
          <el-input
            v-model="current_device_data.remotePort"
            class="!w-[220px]"
          />
        </el-form-item>
        <el-form-item label="轮巡周期">
          <el-input
            v-model="current_device_data.pollCycle"
            type="number"
            class="!w-[220px]"
          />
        </el-form-item>
        <el-form-item label="指令间隔">
          <el-input
            v-model="current_device_data.pollInterval"
            type="number"
            class="!w-[220px]"
          />
        </el-form-item>
        <el-form-item label="通讯超时">
          <el-input
            v-model="current_device_data.responseTimeout"
            type="number"
            class="!w-[220px]"
          />
        </el-form-item>
        <el-form-item label="最大分包长度">
          <el-input
            v-model="current_device_data.maxLength"
            class="!w-[220px]"
          />
        </el-form-item>
        <el-form-item label="非连续地址间隔">
          <el-input
            v-model="current_device_data.discontinuousAddressInterval"
            class="!w-[220px]"
          />
        </el-form-item>
        <el-form-item label="CRC顺序">
          <el-select
            v-model="current_device_data.crcMode"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in crcModeData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="写16位功能码">
          <el-select
            v-model="current_device_data.write16Cmd"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in write16CmdData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="整数16位解码">
          <el-select
            v-model="current_device_data.int16Order"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in int16OrderData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="整数32位解码">
          <el-select
            v-model="current_device_data.int32Order"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in int32OrderData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="浮点32位解码">
          <el-select
            v-model="current_device_data.floatOrder"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in floatOrderData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="整数64位解码">
          <el-select
            v-model="current_device_data.int64Order"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in int64OrderData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="浮点64位解码">
          <el-select
            v-model="current_device_data.doubleOrder"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in doubleOrderData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="ASCII解码">
          <el-select
            v-model="current_device_data.asciiOrder"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in asciiOrderData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="
            current_device_data.workMode == 0 ||
            current_device_data.workMode == 1
          "
          label="工作模式"
        >
          <el-select
            v-model="current_device_data.workMode"
            class="!w-[220px]"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in workModeData"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="自定义">
          <el-input
            v-model="current_device_data.keepValue"
            class="!w-[220px]"
          />
        </el-form-item>
      </el-form>
      <div class="btn_group">
        <!-- <el-button
          v-if="tree_data.length > 0"
          type="primary"
          size="small"
          style="height: 100%"
          @click="addVariable"
          >添加变量</el-button
        > -->
        <el-button
          v-if="tree_data.length > 0"
          type="primary"
          size="small"
          style="height: 100%"
          @click="applyVariableChange"
          >应用修改</el-button
        >
      </div>
    </div>
    <div class="content_right">
      <!-- 变量生成 -->
      <!-- 上面的操作按钮 -->
      <div class="btn_group1">
        <el-button
          v-if="tree_data.length > 0"
          type="primary"
          size="small"
          style="height: 100%"
          @click="addVariable"
          >添加变量</el-button
        >
        <el-button
          v-if="!isOpen"
          type="primary"
          size="small"
          style="height: 100%"
          @click="openDebug"
        >
          打开调试
        </el-button>
        <el-button
          v-if="isOpen"
          type="primary"
          size="small"
          style="height: 100%"
          @click="closeDebug"
        >
          关闭调试
        </el-button>
      </div>
      <!-- {{ current_device_data }} <br /> -->
      <pure-table
        v-if="tree_data.length > 0"
        class="pure"
        border
        row-key="id"
        align-whole="center"
        :cell-style="{ cursor: 'pointer' }"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
        :data="current_device_data.variables"
        :columns="columns"
        @cell-click="cellDialogUpdate"
      >
        <template #operation="{ row, index }">
          <el-button
            v-if="!editMap[index]?.editable"
            class="reset-margin"
            link
            title="调试时不允许修改变量"
            :disabled="isOpen"
            type="primary"
            :icon="useRenderIcon(EditPen)"
            @click="onEdit(row, index)"
          >
            修改
          </el-button>
          <div v-else>
            <el-button
              class="reset-margin"
              link
              type="primary"
              @click="onSave(index)"
            >
              保存
            </el-button>
            <el-button class="reset-margin" link @click="onCancel(index)">
              取消
            </el-button>
          </div>
          <el-button
            v-if="!editMap[index]?.editable"
            class="reset-margin"
            link
            title="调试时不允许删除变量"
            :disabled="isOpen"
            type="primary"
            :icon="useRenderIcon(Delete)"
            @click="deleteVariable(row)"
          >
            删除
          </el-button>
        </template>
      </pure-table>
    </div>
  </div>
</template>

<style scoped sass>
.content {
  width: 100%;
  height: calc(86vh - 12px);
  display: flex;
  justify-content: space-around;
  /* border: 1px solid red; */
}

.content_left {
  width: 200px;
  height: 100%;
  overflow-x: hidden;
  border-radius: 10px;
  background-color: #eaeaee;
  padding: 10px;
}
.content_middle {
  width: 230px;
  height: 100%;
  border-radius: 10px;
  background-color: #eaeaee;
  padding: 10px;
  position: relative;
}
.content_right {
  width: calc(100% - 450px);
  height: 100%;
  margin-right: 6px;
  border-radius: 10px;
  background-color: #eaeaee;
  padding: 10px;
  overflow-y: auto;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  font-size: 0.7rem;
}
.device_form:deep(.el-form-item) {
  margin-bottom: 0 !important;
}
.device_form:deep(.el-form-item__label) {
  font-size: 0.7rem;
  width: 90px;
  padding: 0 8px 0 0;
  /* justify-content: flex-start; */
}
.btn_group {
  position: absolute;
  bottom: 20px;
  height: 30px;
  width: calc(100% - 20px);
  display: flex;
  justify-content: space-around;
}
.btn_group1 {
  text-align: right;
}
/* 右边的那个表格 */
.pure {
  /* width: calc(); */
}
</style>
